<template>
  <div class="container">
       <div class="main-map">
         <div class="map-ledt">
            <div class="map-title">
                实际交易情况
            </div>
            <div class="map-lists">
              <div class="map-list">
              <div class="map-listnum title">
                交易总额
              </div>
               <div class="map-listnum num">
                  11111111元
              </div>
              </div>

              <div class="map-list">
              <div class="map-listnum title">
                交易总额
              </div>
               <div class="map-listnum num">
                  11111111元
              </div>
              </div>

              <div class="map-list">
              <div class="map-listnum title">
                交易总额
              </div>
               <div class="map-listnum num">
                  11111111元
              </div>
              </div>

              <div class="map-list">
              <div class="map-listnum title">
                交易总额
              </div>
               <div class="map-listnum num">
                  11111111元
              </div>
              </div>
            </div>
            <!-- 地图 -->
            <div class="map-chart">
               <div id="amap-main">

              </div>
            </div>
         </div>

         <div class="map-right">
              <div class="map-right-top">
                 <div class="map-right-title">
                实际交易情况
              </div>
              <div class="map-right-echart">
              <div id="myChart" ></div>
              </div>

              </div>
                <div class="map-right-bottom">
                      <div class="map-right-title">
                    月复收购率
                  </div>
                    <div class="bar-left">
                  <div class="barleft">

                    <el-progress type="circle" :percentage="25" class="circle" ></el-progress>
                    <p>支付宝用户</p>
                  </div>
                  <div class="barleft">

                    <el-progress type="circle" :percentage="25" class="circle" color="#13ce66"></el-progress>
                    <p>微信用户</p>
                  </div>
                  </div>
              </div>
         </div>
       </div>

       <!-- 波纹图 -->
          <div class="Corrugatedfigure">
            <div class="map-right-title">
                销售趋势

              </div>
                <div class="WavefigurE">
            <div id="eCharts" :style="{width: '100%', height: '100%'}" class="mainechart"></div>
           </div>
          </div>

          <!-- 波浪图 -->
           <div class="Corrugatedfigure">
            <div class="map-right-title">
                用户数增长趋势
                <span class="map-righttitle">总用户数 3478  </span>
              </div>
              <div class="WavefigurE">
                     <div id="Wavefigure" :style="{width: '100%', height: '100%'}" class="mainechart"></div>
              </div>

          </div>

          <!-- 饼图 -->
          <div class="Corrugatedfigure">
            <div class="map-right-title">
                设备点位类型分布情况
              </div>
              <div class="pieWavepie">
             <div id="Wavepie1" :style="{width: '100%', height: '100%'}" class="mainechart"></div>
              <div id="Wavepie2" :style="{width: '100%', height: '100%'}" class="mainechart"></div>
              </div>

          </div>

        <!-- 柱状图 -->
          <div class="Corrugatedfigure">
            <div class="map-right-title">
                城市机器排行
                <span class="map-righttitle">总机器数量 3478        </span>
              </div>
              <div class="WavefigurE">
                     <div id="histogram" :style="{width: '100%', height: '100%'}" class="mainechart"></div>
              </div>

          </div>

  </div>
</template>
<script>
import { lazyAMapApiLoaderInstance } from 'vue-amap';
export default {
  data(){
    return{
      
    }
  },
  //地图
  name: "map-chart",
  mounted() {
     lazyAMapApiLoaderInstance.load().then(() => {
      this.map = new AMap.Map("amap-main", {
        center: new AMap.LngLat(121.59996, 31.197646)
      });
    });
    // /echarts图
    this.getEcharts();
    this.Corrugatedfigure()
    this.Wavefigure()
    this.Wavepie1()
    this. Wavepie2()
    this.Gethistogram()
  },
   methods:{
    //图一折线图
    getEcharts() {
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      var colors = ["#5793f3", "#d14a61", "#675bba"];

      var option = {
        color: colors,

        tooltip: {
          trigger: "none",
          axisPointer: {
            type: "cross"
          }
        },
        legend: {
          data: ["2015 降水量", "2016 降水量"]
        },
        grid: {
          top: 70,
          bottom: 50
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: colors[1]
              }
            },
            axisPointer: {
              label: {
                formatter: function(params) {
                  return (
                    "降水量  " +
                    params.value +
                    (params.seriesData.length
                      ? "：" + params.seriesData[0].data
                      : "")
                  );
                }
              }
            },
            data: [
              "2016-1",
              "2016-2",
              "2016-3",
              "2016-4",
              "2016-5",
              "2016-6",
              "2016-7",
              "2016-8",
              "2016-9",
              "2016-10",
              "2016-11",
              "2016-12"
            ]
          },
          {
            type: "category",
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: colors[0]
              }
            },
            axisPointer: {
              label: {
                formatter: function(params) {
                  return (
                    "降水量  " +
                    params.value +
                    (params.seriesData.length
                      ? "：" + params.seriesData[0].data
                      : "")
                  );
                }
              }
            },
            data: [
              "2015-1",
              "2015-2",
              "2015-3",
              "2015-4",
              "2015-5",
              "2015-6",
              "2015-7",
              "2015-8",
              "2015-9",
              "2015-10",
              "2015-11",
              "2015-12"
            ]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "2015 降水量",
            type: "line",
            xAxisIndex: 1,
            smooth: true,
            data: [
              2.6,
              5.9,
              9.0,
              26.4,
              28.7,
              70.7,
              175.6,
              182.2,
              48.7,
              18.8,
              6.0,
              2.3
            ]
          },
          {
            name: "2016 降水量",
            type: "line",
            smooth: true,
            data: [
              3.9,
              5.9,
              11.1,
              18.7,
              48.3,
              69.2,
              231.6,
              46.6,
              55.4,
              18.4,
              10.3,
              0.7
            ]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

    //波纹图
    Corrugatedfigure(){
       let eCharts = this.$echarts.init(document.getElementById("eCharts"));
       var option = {
          xAxis: {
              type: 'category',
              boundaryGap: false,
              data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月', '九月', '十月', '十一月', '十二月']
          },
          yAxis: {
              type: 'value'
          },
           color: ["#3c90f7", "#26c957"],
        calculable: true,
          series: [{
              data: [820, 932, 901, 934, 1290, 1330,  901, 934, 1290, 1330, 1200,1500],
              type: 'line',
                 smooth: true,
              areaStyle: {}
          }]
      };

        // 使用刚指定的配置项和数据显示图表。
      eCharts.setOption(option);
    },

//波浪图
    Wavefigure(){
       let Wavefigure = this.$echarts.init(document.getElementById("Wavefigure"));
          var   option = {
            title: {
                text: '折线图堆叠'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['支付宝支付','微信支付'],

                  //  y: "center",
            },
            color: ["#3c90f7", "#26c957"],
                calculable: true,
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月', '九月', '十月', '十一月', '十二月']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'支付宝支付',
                    type:'line',
                      smooth: true,
                    stack: '总量',
                    data:[120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name:'微信支付',
                    type:'line',
                      smooth: true,
                    stack: '总量',
                    data:[220, 182, 191, 234, 290, 330, 310]
                },

            ]
          };

        // 使用刚指定的配置项和数据显示图表。
      Wavefigure.setOption(option);
    },

//饼图
   Wavepie1(){
            let Wavepie1 = this.$echarts.init(document.getElementById("Wavepie1"));
          var option = {
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b}: {c} ({d}%)"
            },

            color: ["#3c90f7", "#ff5733", "#5ebe67", "#f4cd49", "#e05667", "#7c4bd8", "#ac33c1"],
            calculable: true,

            legend: {
              orient: "vertical",
              x: "right",
              y:"center",
              data: ["社区","CBD", "工厂", "交通枢纽", "科技园","商城","其他"]
            },
            series: [
              {
                name: "访问来源",
                type: "pie",
                radius: ["50%", "70%"],
                avoidLabelOverlap: false,

                label: {
                  normal: {
                    show: false,
                    position: "center"
                  },
                  emphasis: {
                    show: true,
                    textStyle: {
                      fontSize: "30",
                      fontWeight: "bold"
                    }
                  }
                },
                labelLine: {
                  normal: {
                    show: false
                  }
                },
                data: [
                  { value: 335, name: "社区" },
                  { value: 310, name: "CBD" },
                  { value: 234, name: "工厂" },
                    { value: 335, name: "交通枢纽" },
                  { value: 310, name: "科技园" },
                  { value: 234, name: "商城" },
                  { value: 1548, name: "其他" }
                ]
              }
            ]
          };
          Wavepie1.setOption(option);
        },

   Wavepie2(){
        let Wavepie2 = this.$echarts.init(document.getElementById("Wavepie2"));
      var option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },

        color: ["#499df8", "#f5f5f5"],
        calculable: true,

        legend: {
          orient: "vertical",
          x: "right",
          y:"center",
          data: ["以待机", "已布机"]
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,

            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value:50, name: "以待机" },
              { value: 310, name: "已布机" },

            ]
          }
        ]
      };
      Wavepie2.setOption(option);
    },

// 柱状图
   Gethistogram(){
          let histogram = this.$echarts.init(document.getElementById("histogram"));
          var option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    color: ["#3c90f7", "#7948ea"],
        calculable: true,
    legend: {
        data:['直接访问','联盟广告']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['深圳市','上海市','北京市','南昌市','广州市','南京市','武汉市','西安市','珠海市','苏州市','天津市','城都市']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'直接访问',
            type:'bar',
             barWidth : 20,//柱图宽度
            data:[320, 332, 301, 334, 390, 330, 320,111,334, 390, 330,850]
        },

        {
            name:'联盟广告',
            type:'bar',
            stack: '广告',
             barWidth : 20,//柱图宽度
            data:[220, 182, 191, 234, 290, 330, 310,210,350,680,560,210]
        },
    ]
     };


        // 使用刚指定的配置项和数据显示图表。
      histogram.setOption(option);
   }

},


};
</script>
<style>
@import "../../style/map.css";
.map-chart #amap-main {
  height: 485px;

  /* width:847px;; */
}
</style>
